import React from 'react';
import { List} from 'antd';
import PropTypes from 'prop-types';

const ListItemUI = (props) => {
    const { listData ,handleDeletedItem}  = props;
    return (
        <div className="ListItem">
         <List
            className="demo-loadmore-list"
            itemLayout="horizontal"
            dataSource={listData}
            renderItem={(item,index) => (
                                      // 原生写的方法必须用箭头函数，因为this指向问题
            <List.Item actions={[<a onClick={() => handleDeletedItem(index)}>删除</a>]}>
                <div>{item}</div>
            </List.Item>
            )}
        />
      </div>
    )
}

ListItemUI.propTypes = {
    listData:PropTypes.array,
    handleDeletedItem:PropTypes.func.isRequired
}

export default ListItemUI;